<template>
  <div 
    ref="chartRef" 
    class="echarts-container"
    :style="{ width: width, height: height }"
  ></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick, defineProps, defineEmits } from 'vue';
import * as echarts from 'echarts';

// 定义props
const props = defineProps({
  // 图表配置项
  option: {
    type: Object,
    required: true
  },
  // 图表宽度
  width: {
    type: String,
    default: '100%'
  },
  // 图表高度
  height: {
    type: String,
    default: '400px'
  },
  // 是否启用响应式调整
  responsive: {
    type: Boolean,
    default: true
  },
  // 移动端适配断点
  mobileBreakpoint: {
    type: Number,
    default: 768
  }
});

// 定义事件
const emit = defineEmits(['chartReady', 'chartClick', 'chartHover']);

// 获取图表容器DOM
const chartRef = ref(null);
// 存储图表实例
let myChart = null;

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;
  
  // 初始化图表实例
  myChart = echarts.init(chartRef.value);
  
  // 设置图表配置
  updateChart(props.option);
  
  // 注册事件监听
  registerEvents();
  
  // 通知父组件图表已准备就绪
  emit('chartReady', myChart);
};

// 更新图表配置
const updateChart = (option) => {
  if (!myChart) return;
  // 应用移动端适配
  const adaptedOption = adaptChartForMobile(option);
  myChart.setOption(adaptedOption, true);
};

// 注册图表事件
const registerEvents = () => {
  if (!myChart) return;
  
  // 点击事件
  myChart.on('click', (params) => {
    emit('chartClick', params);
  });
  
  // 鼠标悬停事件
  myChart.on('mouseover', (params) => {
    emit('chartHover', params);
  });
};

// 移动端适配函数
const adaptChartForMobile = (option) => {
  const isMobile = window.innerWidth < props.mobileBreakpoint;
  
  // 深拷贝配置项，避免直接修改原对象
  const adaptedOption = JSON.parse(JSON.stringify(option));
  
  // 移动端简化配置
  if (isMobile) {
    // 调整图例
    if (adaptedOption.legend) {
      adaptedOption.legend.bottom = 0;
      adaptedOption.legend.textStyle = adaptedOption.legend.textStyle || {};
      adaptedOption.legend.textStyle.fontSize = 12;
    }
    
    // 调整标题
    if (adaptedOption.title) {
      adaptedOption.title.textStyle = adaptedOption.title.textStyle || {};
      adaptedOption.title.textStyle.fontSize = 14;
    }
    
    // 调整提示框
    if (adaptedOption.tooltip) {
      adaptedOption.tooltip.axisPointer = { type: 'line' };
    }
  }
  
  return adaptedOption;
};

// 处理窗口大小变化
const handleResize = () => {
  if (!myChart || !props.responsive) return;
  
  myChart.resize();
  // 重新应用移动端适配
  updateChart(props.option);
};

// 组件挂载时初始化图表
onMounted(() => {
  nextTick(() => {
    initChart();
    
    // 添加窗口大小变化监听
    if (props.responsive) {
      window.addEventListener('resize', handleResize);
    }
  });
});

// 监听配置项变化
watch(
  () => props.option,
  (newOption) => {
    updateChart(newOption);
  },
  { deep: true }
);

// 组件卸载时销毁图表
onUnmounted(() => {
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }
  
  // 移除窗口大小变化监听
  if (props.responsive) {
    window.removeEventListener('resize', handleResize);
  }
});
</script>

<style scoped>
.echarts-container {
  min-height: 200px; /* 确保有最小高度 */
}
</style>